﻿<template id="__header">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand hidden-sm" href="http://ikende.com" target="_blank">Beetlex FathttpApi 示例</a>
            </div>
            <div class="navbar-collapse collapse" role="navigation">
                <ul class="nav navbar-nav">
                   
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a href="http://ikende.com" target="_blank">关于</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<template id="__footer">
    <div class="navbar navbar-inverse navbar-fixed-bottom" style="height:30px;background-color:#e4e4e4;border-color:#fff;padding-top:6px;text-align:center;">
        <div class="container">
            <form v-if="!status" class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" v-model="nickName" class="form-control">
                </div>
                <button type="button" class="btn btn-default" @click="onLogin">Login</button>
            </form>
            <form v-else class="form-inline">
                <div class="form-group">
                    <div class="dropup">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{roomName}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li v-for="item in rooms"><a href="javascript:void(0)" @click="onSelectRoom(item.Name)">{{item.Name}}</a></li>
                           
                        </ul>
                    </div>
                </div>
                <div v-if="roomName!='Rooms'" class="form-group">

                    <input type="text" v-model="message" class="form-control" style="width:500px;">
                </div>
                <button v-if="roomName!='Rooms'" type="button" class="btn btn-default" @click="onTalk">Talk</button>
            </form>
           
        </div>
    </div>
</template>
<script>

    Vue.component('page-header', {
        props: ['info', 'page'],
        data: function () {
            return {
                count: 0
            }
        },
        template: __header
    });

    Vue.component('page-footer', {
        props: ['status','rooms'],
        data: function () {
            return {
                count: 0,
                roomName: 'Rooms',
                message: '',
                nickName:''
            }
        },
        methods: {
            onSelectRoom: function (name) {
                this.roomName = name;

                this.$emit('select', name)
            },
            onTalk: function () {
                this.$emit('talk', this.message);
                this.message = '';
            },
            onLogin: function () {
                if (!this.nickName) {
                    alert('enter you name!');
                    return;
                }
                this.$emit('login', this.nickName);
            }
        },
        template: __footer,
    })

</script>



